/**
 * @author Daniel
 *
 * Usage:
 * Html
 * <label><input type="checkbox"/>hello</label>
 * <label><input name="group" type="radio"/>r1</label>
 * <label><input name="group" type="radio"/>r2</label>
 * javascript:
 * $('input[type="checkbox"]', 'input[type="radio"]).beautifyCheckBtn({className:"checkbox"});
 */

(function($){
	
	$.fn.beautifyCheckBtn = function(settings){
		
		var settings = jQuery.extend({
					className : ''
				}, settings);
		
		return this.each(function() {
			var labelOuter = $(this).parent();
			var spanBG = $('<span/>').addClass('background');
			var inputObj = $(this).addClass('hidden');
			
			labelOuter.prepend(spanBG).addClass(settings.className);
			
			if (!inputObj.attr('disabled')) {
				labelOuter.bind('click', function(event){
					event.preventDefault();
					
					if(inputObj.is(':checkbox')){
						inputObj.get(0).checked = !inputObj.get(0).checked;
						spanBG.toggleClass('checked');
					}else{
						// Uncheck all radio
						$('input[name="'+inputObj.attr('name')+'"]').each(function(){
							$(this).get(0).checked = false;
							$(this).parent().find('span.background').removeClass('checked');	
						});
						
						spanBG.addClass('checked');
						inputObj.get(0).checked = true;
					};
				});
			}
		});
	}
	
})(jQuery);

(function($) {
	
	var dropdownList = {
		
		options: {
			data: [] //[{label:'label', value:'value'}, ...]
			, showAllOption: true // 是否显示全部选项
			, allOptionData: {label: 'Select All', value:'all'} // 当showAllOption为true时,可设置全部选项的数据
			, className: 'dropdownlist'
			//, onShowMenu: function() {}
			//, onHideMenu: function() {}
			//, onChange: function(event, data) {} // data:{value:'', label:''}
		}
		
		, _Events: {
			SHOW_MENU: 'onShowMenu'
			, HIDE_MENU: 'onHideMenu'
			, CHANGE: 'onChange'
		}
		
		, _data: []
		
		, _componentHtml: [
			  '	<a class="dropdown-toggle">'
			, '		<span class="txt"></span> <span class="arrow"></span>'
			, '	</a>'
			, '	<ul class="dropdown-menu">'
			, '	</ul>'
		].join(' ')
		
		, _listItemHtml: '<li val="{1}">{2}</li>'
		
		, _selectedData: null
		
		, _dropdownMenu: null
		, _dropdownToggleBtn: null
		, _displayTxt: null
		
		, _create: function() {
			var self = this
				, container = self.element
				;
			
			container.html(self._componentHtml);	
			
			self._initDOMObjects();
			self._bindEvents();	
			self.updateData(self.options.data);
			
			container.addClass(self.options.className);
		}
		
		, _setOption: function(key, value) {
			$.Widget.prototype._setOption.apply(this, arguments);
		}
		
		, _initDOMObjects: function() {
		 	var self = this
			  	, container = self.element;
			
			self._dropdownToggleBtn = container.find('.dropdown-toggle');	
			self._dropdownMenu = container.find('.dropdown-menu');	
			self._displayTxt = container.find('.txt');
		}
		
		, _bindEvents: function() {
			var self = this
				, container = self.element
				, dropdownToggleBtn = self._dropdownToggleBtn
				, dropdownMenu = self._dropdownMenu
				;
			
			dropdownToggleBtn.bind('click', function() {
				if (dropdownMenu.css('display') == 'none') {
					dropdownMenu.show();
					self._trigger(self._Events.SHOW_MENU, new $.Event(self._Events.SHOW_MENU));
				} else {
					dropdownMenu.hide();
					self._trigger(self._Events.HIDE_MENU, new $.Event(self._Events.HIDE_MENU));					
				}
			});
		}
		
		, _bindItemEvents: function() {
			var self = this
				, dropdownToggleBtn = self._dropdownToggleBtn
				, dropdownMenu = self._dropdownMenu
				, dropdownItems = dropdownMenu.find('li')
				, displayTxt = self._displayTxt
				;
			
			dropdownItems.each(function(idx, item) {
				item = $(item);
				item.bind('click', function() {
					var label = item.text(),
						value = item.attr('val');
					
					dropdownMenu.hide();
					self._trigger(self._Events.HIDE_MENU, new $.Event(self._Events.HIDE_MENU));	
					
					displayTxt.html(label);
					
					if (!self._selectedData || self._selectedData.value != value) {
						self._selectedData = {label: label, value: value};
						self._trigger(self._Events.CHANGE, new $.Event(self._Events.CHANGE), {label: label, value: value});	
					}
					
				});
			});	
		}
		
		, updateData: function(data) {
			var self = this
				, dropdownMenu = self._dropdownMenu
				, listItemHtml = self._listItemHtml
				;		
				
			self._data = data;	
			if (self.options.showAllOption)	{
				self._data = $.merge([self.options.allOptionData], data); //增加选择全部的项
			}
			
			if (self._data.length > 0) {
				dropdownMenu.html('');
				self._data.forEach(function(item) {
					dropdownMenu.append($.formatMessage(listItemHtml, item.value, item.label));
				});
			}
			
			self._bindItemEvents();	
			
			if (self._selectedData) {
				dropdownMenu.find('li[val="'+self._selectedData.value+'"]').trigger('click');
			} else {
				//默认选择第一项
				dropdownMenu.find('li:first-child').trigger('click');				
			}		
		}
		
		, getSelectedData: function() {
			var self = this;
			return self._selectedData;
		}
		
		, setSelectedVal: function(val) {
			var self = this
				, dropdownMenu = self._dropdownMenu
				, selectedItem = dropdownMenu.find('li[val="'+val+'"]')
			;
			
			if (selectedItem.length > 0) {
				selectedItem.trigger('click');
			}
		}
		
		, destroy: function() {
			$.Widget.prototype.destroy.call(this);
		}
		
	};
	
	$.widget('daniel.dropdownList', dropdownList);
})(jQuery);